<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                float: left;
                margin-left: 20px;
                background: red;
                filter:alpha(opacity:30);
                opacity: 0.3;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
    <script>
        window.onload = function(){
            let aDiv = document.getElementsByTagName("div");
            for (let i = 0; i < aDiv.length; i++) {
                aDiv[i].alpha = 30;
                aDiv[i].timer = null;
                aDiv[i].onmouseover= function(){
                    startMove(this,100);
                };

                aDiv[i].onmouseout = function(){
                    startMove(this,30);
                };
            }
        };
        function startMove(obj,iTarget){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var speed = (iTarget-obj.alpha)/6;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);
                if (iTarget === obj.alpha){
                    clearInterval(obj.timer);
                } else{
                    obj.alpha+=speed;
                    obj.style.filter="alpha(opacity:"+obj.alpha+")";
                    obj.style.opacity=obj.alpha/100;
                }
            },30);
        }
    </script>
</html>